// 样式化组件

import styled from "@emotion/styled";
import { css, Global } from "@emotion/react";
import Demo from "./Demo";

const Container = styled.div`
  width: 200px;
  height: 200px;
  background: skyblue;
  color: blue
  &:hover {
    background: pink
  }
  & > span {
    color: red
  }
`;

const Button = styled.button`
  color: red;
`;

// 样式组合
const base = css`
  color: yellow;
  background: #777;
`;
const danger = css`
  color: red;
`;

// Globa组件设置全局样式
const styles = css`
  body {
    margin: 0;
  }
  a {
    text-decoration: none;
    color: yellow;
  }
`;

function App() {
  return (
    <div>
      <Global styles={styles} />
      <Container>
        <span>好好学习</span>
      </Container>
      <Button as="a" href="#">
        Button
      </Button>
      <div css={[base, danger]}>后调用的样式优先级高于先调用的</div>
      <Demo />
    </div>
  );
}

export default App;
